<template>
  <div class="home-wrapper">
    <el-row :gutter="20" style="margin-bottom: 24px;">
      <el-col :span="8">
        <el-card class="stat-card" shadow="never">
          <i class="el-icon-user-solid stat-icon user"></i>
          <div class="stat-title">用户数</div>
          <div class="stat-value">{{ userCount }}</div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="stat-card" shadow="never">
          <i class="el-icon-s-check stat-icon exam"></i>
          <div class="stat-title">体检数</div>
          <div class="stat-value">{{ examCount }}</div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="stat-card" shadow="never">
          <i class="el-icon-money stat-icon charge"></i>
          <div class="stat-title">收费项目数</div>
          <div class="stat-value">{{ chargeItemCount }}</div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="16">
        <el-card style="margin-bottom: 20px;" shadow="never">
          <div class="chart-title"><i class="el-icon-data-analysis chart-icon"></i> 近6月体检数统计</div>
          <div ref="barChart" style="width: 100%; height: 300px;"></div>
        </el-card>
        <el-card shadow="never">
          <div class="chart-title"><i class="el-icon-trend chart-icon"></i> 近6月收入趋势</div>
          <div ref="lineChart" style="width: 100%; height: 300px;"></div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card style="margin-bottom: 20px;" shadow="never">
          <div class="chart-title"><i class="el-icon-location-outline chart-icon"></i> 体检分布（中国）</div>
          <div ref="mapChart" style="width: 100%; height: 300px;"></div>
        </el-card>
        <el-card shadow="never">
          <div class="sys-intro">
            <h4><i class="el-icon-bell notice-icon"></i> 系统公告</h4>
            <ul class="notice-list">
              <li v-for="(item, idx) in notices" :key="idx"><i class="el-icon-warning-outline"></i> {{ item }}</li>
            </ul>
            <h4 style="margin-top:18px;"><i class="el-icon-info"></i> 系统介绍</h4>
            <p>本系统为体检管理平台，集成了体检登记、项目管理、单位管理、账单管理、收费设置等功能，支持数据可视化与智能统计，助力体检业务高效开展。</p>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-backtop target=".home-wrapper" :visibility-height="200" :right="40" :bottom="60">
      <div class="backtop-inner"><i class="el-icon-caret-top"></i></div>
    </el-backtop>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data() {
    return {
      userCount: 128,
      examCount: 256,
      chargeItemCount: 12,
      notices: [
        '欢迎使用体检管理系统！如有问题请联系管理员。',
        '系统将于本周五晚进行维护，请提前保存数据。',
        '2024年体检套餐已上线，欢迎咨询。',
      ],
    };
  },
  mounted() {
    this.initBarChart();
    this.initLineChart();
    this.initMapChart();
  },
  methods: {
    initBarChart() {
      const chart = window.echarts.init(this.$refs.barChart);
      chart.setOption({
        tooltip: {},
        xAxis: { data: ['1月', '2月', '3月', '4月', '5月', '6月'] },
        yAxis: {},
        series: [{
          name: '体检数',
          type: 'bar',
          data: [30, 45, 60, 80, 70, 90],
          itemStyle: { color: '#409EFF' },
        }],
      });
    },
    initLineChart() {
      const chart = window.echarts.init(this.$refs.lineChart);
      chart.setOption({
        tooltip: {},
        xAxis: { data: ['1月', '2月', '3月', '4月', '5月', '6月'] },
        yAxis: {},
        series: [{
          name: '收入',
          type: 'line',
          data: [3000, 4200, 5000, 6000, 5500, 7000],
          itemStyle: { color: '#67C23A' },
        }],
      });
    },
    initMapChart() {
      const chart = window.echarts.init(this.$refs.mapChart);
      chart.setOption({
        tooltip: { trigger: 'item' },
        visualMap: {
          min: 0,
          max: 100,
          left: 'left',
          top: 'bottom',
          text: ['高','低'],
          inRange: { color: ['#e0f3f8', '#409EFF'] },
          calculable: true
        },
        series: [{
          name: '体检数',
          type: 'map',
          mapType: 'china',
          roam: false,
          label: { show: false },
          data: [
            { name: '北京', value: 80 },
            { name: '上海', value: 60 },
            { name: '广东', value: 90 },
            { name: '浙江', value: 70 },
            { name: '江苏', value: 65 },
            { name: '四川', value: 50 },
          ]
        }]
      });
    },
  },
};
</script>

<style scoped>
.home-wrapper {
  padding: 24px;
  background: #f4f6fa;
  min-height: 100vh;
  position: relative;
}
.stat-card {
  text-align: center;
  padding: 16px 0;
  position: relative;
}
.stat-title {
  color: #888;
  font-size: 15px;
  margin-bottom: 8px;
}
.stat-value {
  font-size: 28px;
  font-weight: bold;
  color: #409EFF;
}
.stat-icon {
  font-size: 38px;
  margin-bottom: 8px;
  display: block;
}
.stat-icon.user { color: #67C23A; }
.stat-icon.exam { color: #E6A23C; }
.stat-icon.charge { color: #F56C6C; }
.chart-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 8px;
  color: #333;
  display: flex;
  align-items: center;
}
.chart-icon {
  font-size: 20px;
  margin-right: 6px;
  color: #409EFF;
}
.notice-list {
  text-align: left;
  font-size: 14px;
  color: #333;
  margin: 0;
  padding-left: 18px;
  line-height: 1.8;
}
.notice-icon {
  color: #E6A23C;
  margin-right: 4px;
}
.sys-intro {
  font-size: 15px;
  color: #333;
}
.backtop-inner {
  height: 40px;
  width: 40px;
  background: #409EFF;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  box-shadow: 0 2px 8px rgba(64,158,255,0.15);
  transition: background 0.2s;
}
.backtop-inner:hover {
  background: #337ecc;
}
</style> 